<template>
  <div class="container">
    <!-- 充值记录 -->
    <!-- 查询条件 -->
    <el-form :inline="true" class="tableSearchBox" size="medium">
      <el-form-item label="用户编号：">
        <el-input v-model="search.meterID" placeholder="请输入用户编号" clearable @keyup.enter.native="getSearchData">
        </el-input>
      </el-form-item>
      <el-form-item label="收费员：">
        <el-select v-model="search.cashierID" clearable placeholder="请选择收费员">
          <el-option v-for="(item,index) in tollCollectorList" :key="index" :label="item.name" :value="item.suid">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间：">
        <el-date-picker v-model="search.startTime" value-format="yyyy-MM-dd" placeholder="开始日期" :editable="false">
        </el-date-picker>-
        <el-date-picker v-model="search.endTime" value-format="yyyy-MM-dd" placeholder="结束日期" :editable="false">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- /查询条件 -->
    <PagesTable :tableMaxHeight="tableHeight" :isIndex="true" :tableHeader="tableHeader" :tableData="tableData"
      :tablePagination="tablePagination" @pageSize="pageSizeChange" @currentPage="currentPageChange" />
  </div>
</template>

<script>
  import PagesTable from "../../components/PagesTable.vue";
  export default {
    components: {
      PagesTable
    },
    data() {
      return {
        tableHeight: "",
        search: {
          meterID: "",
          cashierID: "", //收费员ID
          startTime: "",
          endTime: "" //开始和结束时间
        },
        tollCollectorList: [{
            suid: 1,
            name: "石慧玲"
          },
          {
            suid: 2,
            name: "尚兰英"
          },
          {
            suid: 3,
            name: "王静婷"
          },
          {
            suid: 4,
            name: "郑 锋"
          }
        ], //收费员列表
        tableHeader: [{
            name: "用户编号",
            mark: "meterID"
          },
          {
            name: "用户姓名",
            mark: "meterUserName"
          },
          {
            name: "用水类型",
            mark: "waterRateName"
          },
          {
            name: "用水单价",
            mark: "allPrice"
          },
          {
            name: "上期余额",
            mark: "lastSurplus"
          },
          {
            name: "充值金额(元)",
            mark: "realPaymentMoney"
          },
          {
            name: "购买水量(吨)",
            mark: "depositWaterCount"
          },
          {
            name: "本期余额",
            mark: "currSurplus"
          },
          {
            name: "充值时间",
            mark: "userPayingREcordCreateTime"
          },
          {
            name: "收费员",
            mark: "cashierName"
          }
        ],
        tablePagination: {
          show: true,
          current: 1,
          size: 10,
          total: 1
        },
        tableData: [{
          meterID: '1',
          meterUserName: '白秀珍',
          waterRateName: '生活用水',
          allPrice: '6.5',
          lastSurplus: '0',
          realPaymentMoney: '50',
          depositWaterCount: '7',
          currSurplus: '4.5',
          userPayingREcordCreateTime: '2024-07-18',
          cashierName: '农业银行',
        }]
      };
    },
    mounted() {
      const self = this;
      // self.getTollCollectorList();
      // self.getSearchData();
    },
    beforeDestroy() {},
    created() {
      var self = this;
      var height = $(document).height() - 172 - 113 - 50;
      self.tableHeight = height + "";
    },
    methods: {
      getTollCollectorList() {
        //收费员列表
        const self = this;
        var param = {
          // rid: 4
          rid: 3
        };
        self.$axios.post("/service/bsSysuserInfoGet", param).then(res => {
          if (res.data.status === "success") {
            self.tollCollectorList = res.data.res;
          } else {
            self.$message.error(res.data.res);
          }
        });
      },
      getSearchData() {
        const self = this;
        self.tableData = [];
        self.tablePagination.total = 0;
        self.tablePagination.current = 1;
        self.tablePagination.size = 10;
        self.handleTableData();
      },
      handleTableData() {
        const self = this;
        var param = {
          pageNum: self.tablePagination.current,
          pageSize: self.tablePagination.size
        };
        if (self.search.meterID) {
          param.meterID = self.search.meterID;
        }
        if (self.search.cashierID) {
          param.cashierID = self.search.cashierID;
        }
        if (self.search.startTime && self.search.endTime) {
          param.startTime = self.search.startTime;
          param.endTime = self.search.endTime;
        } else if (self.search.startTime || self.search.endTime) {
          self.$message.error("时间查询需要选择开始日期及结束日期！");
          return;
        }
        // 参数：
        self.$axios
          .post("/service/bsMeterUserDepositWaterAddRecordGet", param)
          .then(res => {
            if (res.data.status === "success") {
              self.tableData = res.data.res;
              self.tablePagination.total = res.data.total;
            } else {
              self.$message.error(res.data.res);
            }
          });
      },
      pageSizeChange(data) {
        const self = this;
        self.tablePagination.size = data;
        self.handleTableData();
      },
      currentPageChange(data) {
        const self = this;
        self.tablePagination.current = data;
        self.handleTableData();
      }
    }
  };
</script>
<style lang="scss" scoped>
</style>